<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>旋转加载</title>
    <style>
      .rotate-loading {
        position:relative;
        width: 200px;
        height: 200px;
        overflow: hidden;
        border-radius: 50%;
        &::after{
          animation: rotate 4s linear infinite;
          content:'';
          position:absolute;
          left:-50%;
          top:-50%;
          width:200%;
          height:200%;
          background-repeat:no-repeat;
          background-size:50% 50%,50% 50%;
          background-position:0 0, 100% 0, 100% 100%, 0 100%;
          background-image:linear-gradient(#399953,#399953),linear-gradient(#fbb300,#fbb300),linear-gradient(#d53e33,#d53e33),linear-gradient(#377af5,#377af5);
        }
      }
      @keyframes rotate {
        100% {
          transform: rotate(1turn);
        }
      }
    </style>
  </head>
  <body>
    <div class="rotate-loading"></div>
  </body>
</html>
